<template>




    <el-dialog title="添加菜单" v-model="dialogOpen" width="500px">


        <el-form :model="formItem" label-width="auto">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="菜单名称">
                        <el-input v-model="formItem.title" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="父级菜单">

                        <el-cascader style="width:100%;" :options="allMenusData"
                         v-model="formItem.pid"
                          clearable
                            :props="{
                                expandTrigger: 'hover',
                                checkStrictly: true,
                                label: 'title',
                                value: '_id',
                                emitPath: false
                            }">

                        </el-cascader>
                    </el-form-item>
                </el-col>


                <el-col :span="12">
                    <el-form-item label="类型">
                        <el-select v-model="formItem.type">
                            <el-option label="菜单" value="menu"></el-option>
                            <el-option label="按钮" value="button"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>


                <el-col :span="12">
                    <el-form-item label="菜单图标">
                        <el-input v-model="formItem.icon">
                            <template #append>
                                <el-button :icon="PictureFilled" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>



                <el-col :span="12">
                    <el-form-item label="路由路径">
                        <el-input v-model="formItem.path" />
                    </el-form-item>
                </el-col>




                <el-col :span="12">
                    <el-form-item label="组件路径">
                        <el-input v-model="formItem.component" />
                    </el-form-item>
                </el-col>


                <el-col :span="24">
                    <el-form-item label="排序">
                        <el-input-number v-model="formItem.order" />
                    </el-form-item>
                </el-col>




                <el-col :span="24">
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="formItem.show">
                            <el-radio label="显示" :value="true"></el-radio>
                            <el-radio label="影藏" :value="false"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>


        <template #footer>
            <el-button @click="dialogOpen = false">取消</el-button>
            <el-button type="primary" @click="handleOk">
                确认
            </el-button>
        </template>

    </el-dialog>
</template>

<script setup lang="ts">
import { PictureFilled } from '@element-plus/icons-vue'
import { ref, watch } from 'vue';
import api from '@/api';
import { ElMessage } from 'element-plus';
// import { emit } from 'process';
// import { title } from 'process';
//解构{}=defineProps（['']）
let { updateItem } = defineProps(['updateItem'])
const formItem = ref<any>({})

const dialogOpen = defineModel();
console.log(dialogOpen);
let emit=defineEmits(['getMenusData'])



//...换地址
//watch侦听
watch(() => updateItem, () => {
    formItem.value = { ...updateItem }
})


const allMenusData = ref<any[]>([]);




const getAllMenusData = async () => {
    let res = await api.menus.search({
        creator: 'huangyuling'
    });
    if (res.code == 200) {
        allMenusData.value = [
            { _id: 0, title: '无' },
            ...res.data.rows
        ];
    }
}





watch(dialogOpen, () => {
    if (dialogOpen) {
        getAllMenusData();
    }
}, {
    immediate: true
})


//进入if，说明有-id是在做修改，进入else,没有_id在做新增
let handleOk = () => {
    if (formItem.value._id) {
        handleUpdate();
    } else {
        handleAdd();
    }

}
//新增
let handleAdd = () => {
    // console.log(formItem.value.pid[formItem.value.pid.length-1]);
    //拿数组当中的最后一个
    // let pid = formItem.value.pid[formItem.value.pid.length - 1];
    api.menus.add({
        ...formItem.value,
        // pid,
        creator: 'huangyuling'
    }).then(res => {
       if(res.code==200){
        ElMessage.success('权限数据新增成功');
     
        dialogOpen.value=false;
        emit('getMenusData')
       }else{
        ElMessage.error(res.message)
       }

    })
}

//修改
let handleUpdate = () => {
    // console.log(formItem.value);
    //拿数组当中的最后一个
    // let pid = formItem.value.pid.at(-1);
    api.menus.update({
        ...formItem.value,
        // pid,
        creator: 'huangyuling'
        // creator创建者
    }).then(res => {
        // console.log(res);
        if(res.code==200){
            ElMessage.success('权限数据修改成功');
            dialogOpen.value=false;
            emit('getMenusData');
        }else{
            ElMessage.error(res.message);
        }

    })

}


</script>

<style scoped></style>